<template>
  <div class="audit">
    <p>
      <span>审核管理</span>
    </p>
    <div class="audit-box">
      <!-- 分页1 -->
      <el-tabs type="border-card">
        <el-tab-pane label="销售楼盘">
          <!-- 三级联动 -->
          <!-- <section class="container">
            <el-row>
              <el-select v-model="provinceValue" placeholder="请选择" @change="selectProvimce">
                <el-option
                  v-for="(item,index) of provincearr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="cityValue" placeholder="请选择" @change="selectcity">
                <el-option
                  v-for="(item,index) of cityarr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select placeholder="请选择" v-model="RegionValue">
                <el-option
                  v-for="(item,index) of regionarr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-row>
          </section>-->
          <v-distpicker @selected="city"></v-distpicker>

          <!-- 新增 -->
          <p>
            <el-row>
              <!-- 点击显示添加遮罩层 -->
              <el-button type="primary" @click="add()">新增</el-button>
            </el-row>
          </p>

          <!-- 表格 -->
          <a-table :columns="columns" :data-source="list" :rowKey="record=>record.id">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <span slot="customTitle">
              <a-icon type="smile-o" />num
            </span>
            <span slot="tags" slot-scope>
              <a-switch checked-children="开" un-checked-children="关" default-checked />
            </span>
            <!-- <span></span> -->
            <span slot="action" slot-scope="text, record">
              <a @click="update(record)">编辑</a>&ensp;
              <a @click="Del(record.id)">删除</a>&ensp;
            </span>
          </a-table>
        </el-tab-pane>

        <!-- 分页2 -->
        <el-tab-pane label="房屋租凭">
          <!-- 三级联动 -->
          <!-- <section class="container">
            <el-row>
              <el-select v-model="provinceValue" placeholder="请选择" @change="selectProvimce">
                <el-option
                  v-for="(item,index) of provincearr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="cityValue" placeholder="请选择" @change="selectcity">
                <el-option
                  v-for="(item,index) of cityarr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select placeholder="请选择" v-model="RegionValue">
                <el-option
                  v-for="(item,index) of regionarr"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-row>
          </section>-->
          <v-distpicker @selected="city"></v-distpicker>

          <!-- 新增 -->
          <p>
            <el-row>
              <!-- 点击显示添加遮罩层 -->
              <el-button type="primary" @click="add()">新增</el-button>
            </el-row>
          </p>

          <!-- 表格 -->
          <a-table :columns="columns" :data-source="list" :rowKey="record=>record.id">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <span slot="customTitle">
              <a-icon type="smile-o" />num
            </span>
            <span slot="tags" slot-scope>
              <a-switch checked-children="开" un-checked-children="关" default-checked />
            </span>
            <!-- <span></span> -->
            <span slot="action" slot-scope="text, record">
              <a @click="update(record)">编辑</a>&ensp;
              <a @click="Del(record.id)">删除</a>&ensp;
            </span>
          </a-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 遮罩层 -->
    <div class="mask" v-show="flag">
      <!-- 添加数据 -->
      <div class="from" v-show="addFlag">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所需区域" prop="need">
            <el-input v-model="ruleForm.need"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="ruleForm.time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="ruleForm.sort"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="append(ruleForm)">立即添加</el-button>
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 修改数据 -->
      <div class="from" v-show="updateFlag">
        <el-form
          :model="editForm"
          :rules="rules"
          ref="editForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所需区域" prop="need">
            <el-input v-model="editForm.need"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="editForm.price"></el-input>
          </el-form-item>
          <div class="block">
            <span class="demonstration">日期</span>
            <el-date-picker
              v-model="editForm.time"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="editForm.sort"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="edit(editForm)">修改数据</el-button>
            <el-button @click="resetForm()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";
//列表头
const columns = [
  {
    title: "序号",
    key: "id",
    dataIndex: "id",
    scopedSlots: { customRender: "id" }
  },
  {
    title: "楼盘名称",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "所需区域",
    dataIndex: "need",
    key: "need"
  },
  {
    title: "价格",
    key: "price",
    dataIndex: "price",
    scopedSlots: { customRender: "price" }
  },
  {
    title: "更新时间",
    key: "time",
    dataIndex: "time",
    scopedSlots: { customRender: "time" }
  },
  {
    title: "排序",
    key: "sort",
    dataIndex: "sort",
    scopedSlots: { customRender: "sort" }
  },
  {
    title: "状态",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
export default {
  data() {
    return {
      //列表渲染
      list: [],
      columns,

      //蒙层表单x2
      //1.添加表单
      ruleForm: {
        name: "",
        need: "",
        price: "",
        time: "",
        sort: ""
      },

      //2.编辑表单
      editForm: {
        name: "",
        need: "",
        price: "",
        time: "",
        sort: ""
      },

      //表单输入条件提示
      rules: {
        name: [{ required: true, message: "请输入楼盘名称", trigger: "blur" }],
        need: [{ required: true, message: "请输入所需区域", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      //时间选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const time = new Date().toTimeString();
              picker.$emit("pick", time);
              // console.log(new Date().toTimeString())
              console.log(time);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },

      //蒙层开关
      flag: false,
      addFlag: false, //添加蒙层
      updateFlag: false //修改蒙层
    };
  },
  created() {
    //调用函数
    this.getList();
  },
  methods: {
    //三级联动
    selectProvimce(id) {
      this.cityarr = [];
      this.regionarr = [];
      this.cityValue = "";
      this.RegionValue = "";
      for (let item of this.provincearr) {
        if (id == item.id) {
          console.log(item);
          this.cityarr = item.children;
        }
      }
    },
    selectcity(id) {
      this.regionarr = [];
      this.RegionValue = "";
      for (let item of this.cityarr) {
        if (id == item.id) {
          this.regionarr = item.children;
        }
      }
    },
    city(data) {
      axios({
        url: "/api/getCitys",
        method: "post",
        data: { value: data }
      }).then(res => {
        this.list = res.data.data;
      });
    },

    //渲染列表数据
    getList() {
      axios({
        url: "/api/housingList"
      }).then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },

    //关闭蒙层
    resetForm() {
      this.flag = false;
      this.addFlag = false;
      this.updateFlag = false;
    },

    //添加数据
    add() {
      this.flag = true;
      (this.addFlag = true), (this.ruleForm = {});
    },
    append(ruleForm) {
      this.flag = false;
      (this.addFlag = false),
        axios({
          url: "/api/housingAdd",
          method: "post",
          data: {
            name: ruleForm.name,
            need: ruleForm.need,
            price: ruleForm.price,
            time: ruleForm.time,
            sort: ruleForm.sort
          }
        }).then(res => {
          //调用函数刷新列表
          this.getList();
        });
    },

    //删除数据
    Del(id) {
      axios({
        url: "/api/housingDel",
        method: "post",
        data: {
          id: id
        }
      }).then(res => {
        //调用函数
        this.getList();
      });
    },

    //修改数据
    update(item) {
      this.flag = true;
      this.updateFlag = true;
      this.editForm = { ...item };
    },
    edit(editForm) {
      this.flag = false;
      this.updateFlag = false;

      axios({
        url: "/api/housingEdit",
        method: "post",
        data: {
          name: editForm.name,
          need: editForm.need,
          price: editForm.price,
          time: editForm.time,
          sort: editForm.sort,
          id: editForm.id
        }
      }).then(res => {
        //调用函数
        this.getList();
      });
    }
  }
};
</script>

<style>
.audit {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  position: relative;
}

.audit > p {
  font-size: 20px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
}

.audit > p span {
  margin-left: 3%;
}

.audit .audit-box {
  width: 94%;
  height: 90%;
  background-color: white;
  border-radius: 20px;
  margin-left: 3%;
  margin-top: 1%;
}

.audit .audit-box .el-select {
  margin-left: 40px;
}

.el-row button {
  margin-top: 10px;
  margin-left: 40px;
}

/* .audit .audit-box table {
  width: 100%;
  background-color: #ccc;
  margin-top: 20px;
}

.audit .audit-box table tr th {
  background-color: #f2f2f2;
  height: 50px;
}

.audit .audit-box table tr td {
  background-color: white;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.audit .audit-box table tr td span {
  margin-left: 10px;
  color: dodgerblue;
} */

/* .ant-table-thead th{
  text-align: center;
} */

.audit .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.audit .mask .from {
  width: 550px;
  height: 500px;
  margin: 230px auto;
  background-color: white;
  border-radius: 13px;
}

.audit .mask .from .el-input__inner {
  width: 90%;
}

.audit .mask .from .block {
  margin-left: 65px;
  margin-bottom: 20px;
}
</style>